<template>
	<view>
		<!-- 成为vip -->
		<view class="vip" v-if="vip == 0">
			<text style="font-size: 20rpx;">成为vip立刻解锁女生微信号</text>
		</view>
		
		<view class="Vip">
			获取会员立享特权
		</view>
		<view class="left-side">
			<scroll-view class="" scroll-x>
				<view class="list" @click="id=item.id" :class="item.id==id?'show':''" v-for="item in viplist" :key='item.id'>
					<view class="tit">
						{{item.name}}
					</view>
					<view class="iocn">
						<image class="img" src="../../static/Line-vip-crown.png" mode=""></image>
					</view>
					<view class="money">
						￥{{item.price}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 支付方式 -->
		<view class="type">
			<!-- 支付宝 -->
			<view class="zfb" :class="type==1?'show':''" @click="type=1">
				支付宝支付
			</view>
			<!-- 微信 -->
			<view class="wx" :class="type==2?'show':''" @click="type=2">
				微信支付
			</view>
			<!-- 钱包 -->
			<!-- <view class="qb" :class="type==3?'show':''" @click="type=3">
				钱包支付
			</view> -->
		</view>
		<view class="submit" @click="submit">
			{{vip == 0 ? "立即开通" : "马上续费"}}VIP
		</view>
		<!-- 推荐 -->
		
	<keyboard :show='show' :id='id' :money='22' @showstate='add()' @tiaoz="tiaoz()"></keyboard>
	</view>
</template>

<script>
	import keyboard from "../../components/keyboardPay/index"
	import * as api from '@/api/api.js'
	export default {
		components:{
			keyboard
		},
		data() {
			return {
				type: 1,
				viplist:'',
				vip:'',
				id:'',
				show:false
			};
		},
		onLoad(options){
			this.vip = options.vip
			console.log(this.vip)
		},
		mounted() {
			this.getvip()
		},
		methods:{
			getvip(){
				api.request({
					url: '/p/vip',
					method: 'GET',
				}).then(res=>{
					this.viplist=res.data
					console.log(res);
				})
			},
			add(e) {
				this.show = false
				console.log('选择', e);
			},
			submit(){
				let that = this
				let a
				if(this.id==''){
					uni.showToast({
						title:'套餐没有选择',
						icon:'none'
					})
					return
				}
				console.log(this.type)
				console.log(this.viplist)
				console.log(this.vip)
				console.log(this.id)
				for (let set of this.viplist){
					if(that.id == set.id){
						
						console.log(that.type,set.id)
						a = set
					}
				}
				console.log(a)
				if(that.type == 2){
					uni.getProvider({
					    service: 'payment', //service	String	服务类型  oauth授权登录 share分享 payment支付 push推送
					    success: function (res) {  //成功的回调
					        console.log(res.provider)
					    }
					});
					console.log("微信支付开始")
					api.request({
						url: '/p/order',
						method: 'POST',
						data: {
							"actualTotal": a.price,
							// "diamondNum": this.qian*10,
							"orderType": 2,
							"packageId": a.id,
							"payType": 1,
							"prodName": a.name,
							"total": a.price
						}
					}).then(res => {
						console.log(res)
						api.request({
							url: '/p/pay',
							method: 'POST',
							data: {
								"orderNumber": res.data.orderNumber,
								"payType": 1
							}
						}).then(dat => {
							console.log(dat)
							console.log(JSON.stringify(dat.data))
							uni.requestPayment({
							    "provider": "wxpay",
							    "orderInfo": {
									"appid": dat.data.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
									"noncestr": dat.data.nonceStr, // 随机字符串
									"package": dat.data.packageValue,        // 固定值
									"partnerid": dat.data.partnerId,      // 微信支付商户号
									"prepayid": dat.data.prepayId, // 统一下单订单号 
									"timestamp": dat.data.timeStamp,        // 时间戳（单位：秒）
									"sign": dat.data.sign // 签名，这里用的 MD5 签名
								}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							    success: function (res) {
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
							        console.log('success:' + JSON.stringify(res));
							    },
							    fail: function (err) {
									uni.showToast({
										title: '支付失败,请重试',
										icon: 'none'
									})
									console.log(err)
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
						})
						
					})
				}
				// this.show=true
			},
			tiaoz(){
				setTimeout(function(){
					uni.switchTab({
						url: '../user/user'
					})
				},500)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #242329;
	}
	.vip {
		width: 90%;
		height: 120rpx;
		line-height: 120rpx;
		border-radius: 18rpx;
		background-color: #f3a669;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		margin: auto;
		padding: 0 30rpx;
		margin-top: 40rpx;

	}
	.Vip{
		width: 90%;
		height: 60rpx;
		line-height:60rpx;
		font-size: 20rpx;
		margin: auto;
		margin-top: 40rpx;
		border-radius: 30rpx;
		background-color: #3a3843;
		text-align: center;
		color: #feb242;
	}
	.left-side {
		scroll-view {
			width: 100%;
			white-space: nowrap;
			margin-top: 60rpx;
		}

		padding-left: 30rpx;
		margin-top: 30rpx;
	
		.list {
			width: 200rpx;
			height: 260rpx;
			border-radius: 10rpx;
			text-align: center;
			border: 1px solid #999;
			margin-bottom: 30rpx;
			display: inline-block;
			margin-right: 30rpx;
			color: #fff;

			.tit {
				font-size: 28rpx;
				margin-top: 30rpx;
			}

			.money {
				margin-top: 20rpx;
				font-size: 42rpx;
			}

			.iocn {
				width: 50rpx;
				height: 50rpx;
				margin: auto;
				margin-top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.show{
		border: 2px solid #feb242;
		}

	}

	.type {
		width: 80%;
		display: flex;
		justify-content: space-around;
		margin: auto;
		margin-top: 100rpx;

		.zfb {
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 30rpx;
			color: #999;
			font-size: 28rpx;
			text-align: center;
			border: 1px solid #999;
		}

		.wx {
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 30rpx;
			color: #999;
			font-size: 28rpx;
			text-align: center;
			border: 1px solid #999;
		}
		
		.qb {
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 30rpx;
			color: #999;
			font-size: 28rpx;
			text-align: center;
			border: 1px solid #999;
		}
		
		.show {
			color: #feb242;
			border: 1px solid #feb242;
		}
	}

	.submit {
		width: 90%;
		height: 88rpx;
		margin: auto;
		line-height: 88rpx;
		border-radius: 15rpx;
		background-color: #feb242;
		color: #3a3843;
		font-size: 28rpx;
		text-align: center;
		margin-top: 50rpx;
	}
.title{
	color: rgba(16, 16, 16, 100);
	font-size: 40rpx;
	text-align: left;
	margin-bottom: 50rpx;
	margin-left: 20rpx;
	margin-top: 50rpx;
}
	.rows {

		.row {
			display: flex;
			width: 95%;
			margin: auto;

			.image {
				width: 200rpx;
				height: 260rpx;
				border-radius: 10rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}

			.massage {
				width: 70%;
				padding-left: 30rpx;



				.text {
					width: 100%;
					display: flex;

					.name {
						width: 25%;
						margin-right: 10rpx;
						font-size: 36rpx;
					}

					.attr {
						width: 55%;
						float: right;
						text-align: right;
					}

					.line {
						width: 60px;
						height: 20px;
						line-height: 20px;
						border-radius: 5px;
						color: rgba(16, 16, 16, 100);
						font-size: 14px;
						text-align: center;
						font-family: Arial;
						border: 1px solid rgba(187, 187, 187, 100);
						background-color: #fff;
						margin-right: 20upx;
						margin-top: 5rpx;
					}
				}

				.txt {
					height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					line-height: 50rpx;
					color: #999;
				}

				.age {
					line-height: 90rpx;
					font-size: 28rpx;
				}

				.tag {
					display: flex;
					flex-flow: wrap;
					margin-top: 20rpx;

					.taglist {
						width: 120rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 5px;
						color: rgba(16, 16, 16, 100);
						font-size: 14px;
						text-align: center;
						font-family: Arial;
						border: 1px solid rgba(187, 187, 187, 100);
						background-color: #fff;
						margin-right: 20upx;
					}
				}
			}
		}
	}
</style>
